<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
  name: 'Person',
})
const name = ref('zll')
const age = ref(20)
const changeName = () => {
  name.value = 'zll2'
}
const changeAge = () => {
  age.value += 1
}
const showTel = () => {
  alert('18888888888')
}
</script>

<style scoped lang="less">
.person {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
</style>
